import {
    Form,
    Input,
    Button,
    Checkbox,
    message
  } from 'antd'
  import { connect } from 'umi';  //中间件使用model数据

  
  import './index.css'
  
  const layout = {
    wrapperCol : { offset: 4, span: 16 }
  }
  
 const Logion=(props:any)=> {
    console.log(props);
    let {dispatch,history,children} = props
    
  
    // 点击“登录”按钮
    const onFinish = (values: any) => {
      dispatch({
        type:'logion/LoGion',
        payload:values,
        callback:(res)=>{
          if(res.status===0){
            console.log('登陆成功');
           history.push('/')
          }
        }
      })
    }
  
    return (
      <div className='qf-login'>
        <div className='wrap'>
            <div className='box'>
            <Form
            name="basic"
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 18 }}
            initialValues={{ remember: true }}
            onFinish={onFinish}
          >
            <Form.Item
              label="用户名"
              name="userName"
              rules={[{ required: true, message: '用户名是必填!' }]}
            >
              <Input />
            </Form.Item>
  
            <Form.Item
              label="密码"
              name="password"
              rules={[{ required: true, message: '密码也是必填!' }]}
            >
              <Input.Password />
            </Form.Item>
  
            {/* <Form.Item name="remember" valuePropName="checked" {...layout}>
              <Checkbox>记住密码</Checkbox>
            </Form.Item> */}
  
            <Form.Item {...layout}>
              <Button type="primary" htmlType="submit">
                登录
              </Button>
            </Form.Item>
  
          </Form>

            </div>
        </div>
      </div>
    )
  }

  const mapStateProps = ({logion})=>{
    return {
        logion
    }

}
export default connect(mapStateProps)(Logion)